<template>
	<view class="rank" :class="[rankEmpty?'':'topbg']">
		<u-navbar class="rankEmptyTop" v-if="rankEmpty" :border-bottom="false" title="排行榜" title-color="#fff" back-icon-color="#fff"></u-navbar>
		<view class="u-navbar" v-else>
			<view class="u-back-icon" @tap="goBack"><my-icon name="back" size="28upx" style="color: #fff;"></my-icon></view>
			<view class="u-navbar-content-title"><view class="u-title u-line-1">排行榜</view></view>
		</view>

		<my-empty v-if="rankEmpty"></my-empty>
		<view class="rank_top" v-if="rankInfo.examname">
			<view class="rankTopTit" style="font-size: 32upx;">《{{ rankInfo.examname }}》</view>
			<view class="rankTopBig">
				本次排名: 第
				<text>{{ rankInfo.rank }}</text>
				名
			</view>
			<view class="rankTopTit">
				本次得分:
				<text>{{ rankInfo.score }}</text>
				<template v-if="rankInfo.scoreDiff != null">
					比上次{{ rankInfo.scoreDiff < 0 ? '减少' + Math.abs(rankInfo.scoreDiff) : '增加' + rankInfo.scoreDiff }}分
				</template>

			</view>
			<view class="rankTopTit" v-if="rankInfo.rankDiff != null">
				上次排名:
				<text>{{ rankInfo.rank + rankInfo.rankDiff }}</text>
				<template>
				比上次{{ rankInfo.rankDiff < 0 ? '下降' + Math.abs(rankInfo.rankDiff) : '上升' + rankInfo.rankDiff }}名
			  </template>
			</view>
		</view>
		<view class="rank_list" v-for="(item, index) in rankInfo.rankVOS" key="rankinfo1">
			<view class="listLeft">
				<image v-if="index < 3" :src="getImgUrl(index + 1)"></image>
				<text v-else>{{ index + 1 }}</text>
			</view>
			<view class="listAll">
				<view class="listMid">
					<image :src="item.avatar"></image>
					<view class="listTxt">
						<view>{{ item.username }}</view>
						<text>交卷时间：{{ item.date }}</text>
					</view>
				</view>
				<view class="listRight gre" :class="[item.score < 60 ? 'org' : 'gre']">{{ item.score }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			rankInfo: {}, //排行信息
			rankEmpty:false,//为空
		};
	},
	onLoad() {
		this.getRank();
	},
	methods: {
		init() {
			this.rankInfo = {};
			return this.getRank();
		},
		// 获取
		getRank() {
			return new Promise((resolve, reject) => {
				this.request
					.get('/app/mine/rankList')
					.then(res => {
						this.rankInfo = res;
						this.rankEmpty=this.rankInfo.rankVOS.length>0?false:true;
						resolve();
					})
					.catch(reject)
					.finally(() => {
						this.status !== 'nomore' && (this.status = 'loadmore');
					});
			});
		},
		getImgUrl(index) {
			return require('../../static/rank/top' + index + '.png');
		},
		// 返回
		goBack() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.empty {
	height: 90%;
	z-index: 1;
	top: auto;
	bottom: 0;
}
.rankEmptyTop{
	/deep/.u-navbar{
		background: url(../../static/rank/rank_bg.png) no-repeat!important;
		background-size: 100% 446upx!important;
	}
}
.topbg{
	background: url(../../static/rank/rank_bg.png) no-repeat;
	background-size: 100% 446upx;
}
.rank {
	width: 100%;
	height: 100%;
	.u-title {
		color: #fff;
		text-align: center;
		font-size: 32upx;
	}
	.u-navbar {
		background: none !important;
		height: 44px;
		line-height: 44px;
		padding-top: 40upx;
	}
	.u-back-icon {
		position: absolute;
		padding: 0 30upx;
	}
	.rank_top {
		height: 338upx;
		margin-top: 20upx;
		padding: 39upx 39upx 59upx 39upx;
		line-height: 55upx;
		.rankTopBig {
			font-size: 32upx;
			color: #fff;
			margin: 15upx 0;
			font-weight: 500;
			text {
				font-size: 52upx;
				color: #ffd200;
				padding: 0 15upx;
			}
		}
		.rankTopTit {
			color: #d6e2ff;
			font-size: 28upx;
			height: 50upx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text {
				display: inline-block;
				color: #ffffff;
				font-weight: bold;
				font-size: 32upx;
				width: 91upx;
				// padding: 0 38upx 0 19upx;
				padding-left: 19upx;
			}
		}
	}
	.rank_list {
		display: flex;
		justify-content: space-between;
		padding: 30upx 40upx 0;
		height: 150upx;
		align-items: center;
	}
	.listMid {
		display: flex;
		justify-content: start;
		width: 500upx;
		line-height: 43upx;
		padding-bottom: 30upx;
		image {
			width: 86upx;
			height: 86upx;
			border-radius: 100upx;
			margin-right: 30upx;
		}
	}
	.listLeft {
		width: 56upx;
		text-align: center;
		image {
			width: 56upx;
			height: 56upx;
		}
		text {
			color: #a6a6a6;
			font-size: 36upx;
			display: block;
		}
	}
	.listRight {
		font-size: 38upx;
		font-weight: 600;
		width: 100upx;
		text-align: right;
		padding-bottom: 30upx;
	}
	.listTxt {
		view {
			color: #4c5059;
			font-size: 30upx;
		}
		text {
			color: #a6a6a6;
			font-size: 26upx;
		}
	}
	.rank_list:last-child {
		margin-bottom: 50upx;
		.listAll {
			border-bottom: none;
		}
	}
	.listAll {
		border-bottom: 1px solid #ebebeb;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.gre {
		color: #5fba4a;
	}
	.org {
		color: #f45c4b;
	}
}
</style>
